<!DOCTYPE HTML>
<head>
	<meta charset='utf-8'>
	<title>9-定时图片切换</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			text-align: center;
		}
		#btn01,#btn02{
			background: cyan;
			width: 100px;
			color: black;
		}
	</style>
	<script>
		window.onload = function(){
			/*
				使图片自动切换
			*/
			//获取img1标签
			var img1 = document.getElementById('img1');
			
			//创建数字保存路径
			var imgARR =['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];
			
			//创建变量保存图片索引
			var index = 0;
			
			//定义变量保存,定时器
			var times;
			
			//为btn01绑定一个单击响应函数
			var btn01 = document.getElementById('btn01');
			btn01.onclick = function(){
				/*
					每一次点击,都会启动一个定时器
				*/
				//在开启定时器之前,需要关闭上一个定时器
				
				clearInterval(times);
				
				//开启一个定时器,自动切换图片
			
				times = setInterval(function(){
				//索引自增
				index++;
				/*方法一
				if(index >=imgARR.length){
					index = 0;
				}
				*/
				//方法二
				index %=imgARR.length;
				//修改img1的src属性
				img1.src = imgARR[index];
				
			},1000);
			};
			//btn02绑定单击响应函数
			var btn02 = document.getElementById('btn02');
			btn02.onclick = function(){
				//点击按钮停止
				/*
					clearInterval()可以接收任意参数
					
				*/
				clearInterval(times);
				
			}
		}
	
	</script>
</head>
<body>
	<img id='img1' src='img/1.png' style='width:1200px;height:666px;'/>
	<br>
	<button id='btn01'>开始</button>
	<button id='btn02'>暂停</button>
</body>
</html>